<template>
	<view class="detail-container">
		<!-- 头部绿色背景和标题 -->
		<view class="header">
			<text class="header-title">商品详情</text>
		</view>
		
		<!-- 商品图片轮播 -->
		<swiper v-if="productDetail && productDetail.images" class="product-swiper" circular indicator-dots autoplay>
			<swiper-item v-for="(item, index) in productDetail.images" :key="index">
				<image :src="item.url" mode="aspectFill" class="product-image" />
			</swiper-item>
		</swiper>
		
		<!-- 商品信息 -->
		<view v-if="productDetail" class="product-info">
			<text class="product-name">{{productDetail.productName}}</text>
			<view class="price-section">
				<text class="product-price">{{productDetail.productPrice}}元/{{productDetail.productUnit}}</text>
				<text class="product-original-price">原价: {{productDetail.productPrice * 1.5}}元</text>
			</view>
			<view class="stock-info">
				<text class="stock-text">库存: {{productDetail.productQuantity || 0}}{{productDetail.productUnit}}</text>
			</view>
			<view class="product-desc">
				<text>{{productDetail.productDescription || '暂无商品描述'}}</text>
			</view>
		</view>
		
		<!-- 底部留白，防止内容被固定按钮遮挡 -->
		<view style="height: 100rpx;"></view>
		
		<!-- 底部固定购买按钮 -->
		<view class="buy-now-btn">
			<text>立即购买</text>
		</view>
	</view>
</template>

<script>
	import request from '@/util/request.js';
	export default {
		
		data() {
			return {
				productId:null,
				productDetail:null,
			}
		},
		methods: {
			getProductDetail(){
				request({
					url: `/product-service/product/home/productInfo/${this.productId}`,
					method: 'GET',
				}).then(res => {
					if (res.data) {
						this.getProductDetail=res.data.product;
						if (this.getProductDetail.length > 0) {
							// 使用第一条记录作为基础产品信息
							const baseProduct = { ...this.getProductDetail[0] };
							
							// 创建图片数组
							baseProduct.images = [];
							
							// 遍历所有记录，收集不同的bannerUrl
							this.getProductDetail.forEach(item => {
								if (item.bannerUrl) {
									baseProduct.images.push({
										url: 'http://121.36.197.175:19000/test/' + item.bannerUrl,
										bannerUrl: item.bannerUrl
									});
								}
							});
							this.productDetail = baseProduct;
							console.log('处理后的产品数据:', this.productDetail);
						}
					}
				}).catch(err => {
					console.error('获取商品详情失败:', err);
					uni.showToast({
						title: '获取商品信息失败',
						icon: 'none'
					});
				});
			},
		},
		onLoad(options) {
            if (options.productId) {
                this.productId = options.productId
                console.log(this.productId)
				this.getProductDetail()
            } else {
                uni.showToast({
                    title: '参数错误',
                    icon: 'none'
                })
                setTimeout(() => {
                    uni.navigateBack()
                }, 1500)
            }
        },
	}
</script>

<style>
.detail-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.header {
	background-color: #6BC15F;
	padding: 20rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-title {
	font-size: 36rpx;
	color: #fff;
	font-weight: bold;
}

.product-swiper {
	width: 100%;
	height: 650rpx;
}

.product-image {
	width: 100%;
	height: 100%;
}

.product-info {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.product-name {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}

.price-section {
	margin-bottom: 20rpx;
}

.product-price {
	color: #e64340;
	font-size: 40rpx;
	font-weight: bold;
	margin-right: 20rpx;
}

.product-original-price {
	color: #999;
	font-size: 28rpx;
	text-decoration: line-through;
}

.stock-info {
	margin-bottom: 20rpx;
	background-color: #f8f8f8;
	padding: 15rpx;
	border-radius: 8rpx;
}

.stock-text {
	font-size: 28rpx;
	color: #666;
}

.product-desc {
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
	margin-top: 30rpx;
}

.buy-now-btn {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100rpx;
	background-color: #6BC15F;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	font-weight: bold;
	z-index: 100;
}

.buy-now-btn text {
	text-align: center;
}
</style>
